<template>
	<view style="padding: 5px 0 5px 0;">
		<!-- 搜索框、头像 -->
		<Header :avatar="avatar"></Header>
		<!-- 轮播图 -->
		<u-swiper :list="carouselChart" keyName="image" showTitle previousMargin="30" nextMargin="30" circular
			:autoplay="true" :loading="false" radius="5" bgColor="#F9F9F9" @click="gowebview"></u-swiper>
		<!-- 公告 -->
		<view class="notice">
			<u-notice-bar :text="notice" color="#ffffff" bgColor="#8A2BE2"></u-notice-bar>
		</view>
		<!-- 功能键 -->
		<view class="box" style="margin: 5px; height: 55px;">
			<uni-row>
				<uni-col :span="8">
					<view class="grid-item-box" @click="clickItem('投稿')">
						<image src="../../static/icon/tougao.png" mode="widthFix" style="width: 30px;"></image>
						<text style="font-size: 15px; margin-top: 5px; font-weight: bold;">投稿</text>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="grid-item-box" @click="clickItem('我的收藏')">
						<image src="../../static/icon/收藏.png" mode="widthFix" style="width: 30px;"></image>
						<text style="font-size: 15px; margin-top: 5px; font-weight: bold;">我的收藏</text>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="grid-item-box" @click="clickItem('签到')">
						<image src="../../static/icon/qiandao.png" mode="widthFix" style="width: 30px;"></image>
						<text style="font-size: 15px; margin-top: 5px; font-weight: bold;">签到</text>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<!-- 帖子 -->
		<view class="box" style="margin: 5px;">
			<view class="postList" style="display: flex;" v-for="item in postList" :key="item.id">
				<view class="postList-item" style="flex: 1; width: 0; margin-bottom: 10px;">
					<!-- 头像、用户名、。。。 -->
					<view class="userMsg"
						style="display: flex; align-items: center; text-align: center; margin-bottom: 10px;">
						<view style="flex: 1;">
							<view style="display: flex; align-items: center; text-align: center;"
								@click="handleUserMsg">
								<u-avatar :src="item.userAvatar" size="25px"></u-avatar>
								<text style="margin-left: 5px;">{{item.username}}</text>
							</view>
						</view>
						<view style="width: fit-content;" @click="handleReport">
							<u-icon name="more-dot-fill"></u-icon>
						</view>
					</view>
					<view @click="goPostDetail(item.id)">
						<!-- 标题 -->
						<view class="title" style="font-size: 16px; font-weight: bold; margin-bottom: 10px">
							{{item.title}}
						</view>
						<!-- 内容 -->
						<view class="content" style="font-size: 28upx; color: #666;margin-bottom: 20upx;">
							{{ replaceHtmlTags(item.content) }}
						</view>
					</view>
					<!--正文最下面各功能部分-->
					<view style="display: flex; margin-bottom: 10px; align-items: center;">
						<!-- <u-tag v-for="tag in JSON.parse(item.tags || [])" :key="tag.id" size="mini" :text="tag"
							style="margin-right: 5px;"></u-tag> -->
						<text style="font-size: 12px; color: #888;">{{item.date}}</text>
						<view style="flex: 1; text-align: right; align-items: center;">
							<uni-icons type="liulan" style="margin-right: 2px;" size="16px"></uni-icons>
							<text style="margin-right: 4px; font-size: 12px; color: #9b9b9b;">
								{{item.readCount}}
							</text>
							<uni-icons type="pinglun" style="margin-right: 2px;" size="16px"></uni-icons>
							<text style="margin-right: 4px; font-size: 12px; color: #9b9b9b;">
								{{pinglunText}}
							</text>
							<uni-icons type="dianzan" style="margin-right: 2px;" size="16px"></uni-icons>
							<text style="margin-right: 4px; font-size: 12px; color: #9b9b9b;">
								{{dianzanTexy}}
							</text>
						</view>
					</view>
					<u-line color="#9b9b9b"></u-line>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from "@/components/Header.vue";
	export default {
		components: {
			Header
		},
		data() {
			return {
				keyword: '',
				carouselChart: [
					"https://img.caimogu.cc/data/original/banner/2023/11/09/d050d365190991e250724fa87abf6642.jpeg",
					"https://img.caimogu.cc/data/original/banner/2023/11/08/d11039127f5fc308987478d7ab30dcd2.jpeg",
					"https://img.caimogu.cc/data/original/banner/2023/08/29/ec30a043bbb3f7774f9762c5b2d923b7.jpeg"
				],
				notices: [],
				notice: '',
				avatar: '',
				username: '',
				postList: [],
				pinglunText: '456',
				dianzanTexy: '789'

			}
		},
		onLoad() {
			this.loadNotice()
			this.load()
			this.loadCarouselChart()
		},
		methods: {
			goPostDetail(workId){
				uni.navigateTo({
				    url: '/pages/postDetail/postDetail?workId=' + workId
				})
			},
			handleUserMsg() {
				console.log("打开帖子用户信息");
			},
			handleReport() {
				console.log("打开举报模块");
			},
			load() {
				let userStorage = uni.getStorageSync('xm-user')
				this.avatar = userStorage.avatar
				this.username = userStorage.username

				this.$request.get('/works/selectAll').then(res => {
					this.postList = res.data || []
				})
			},
			loadCarouselChart() {

			},
			gowebview(index) {
				let item = this.carousel_chart[index];
				console.log(item);
			},
			loadNotice() {
				this.$request.get("/notice/selectAll").then(res => {
					let i = 0;
					this.notices = res.data || []
					this.notice = this.notices.length ? this.notices[i].content : ''

					// 切换展示内容					
					if (this.notices.length > 1) {
						this.inter = setInterval(() => {
							i++
							if (i === this.notices.length) {
								i = 0
							}
							this.notice = this.notices[i].content
						}, 5000)
					}
				})
			},
			clickItem(msg) {
				console.log(msg);
			},
			replaceHtmlTags(text) {
				var reg = /<[^<>]+>/g; //1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
				text = text.replace(reg, ''); //替换HTML标签
				text = text.replace(/&nbsp;/ig, ''); //替换HTML空格
				text = text.replace(/<img*>/gi, '');
				text = text.replace(/<video*>/gi, '');
				return text;
			}
		}
	}
</script>

<style scoped>
	.notice {
		background-color: #8A2BE2;
		margin: 5px;
		border-radius: 10px;
		padding: 0 10px;
	}

	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>